<template>
	<view style="display: flex;">
		<scroll-view scroll-y :style="{height:`${windowHeight}px`}" style="width: 25%;min-width: 25%;">
			<view>
				<view v-for="(item,i) of hero" :key="i" style="border-bottom: 1px solid gray;text-align: center;padding: 6px;" :class="{cur: current == i}" @click="current = i;getDetail(i)">
					<text>{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
		<!-- 右侧 -->
		<scroll-view :scroll-y="true" :style="{height:`${windowHeight}px`}" style=" flex: 1; margin: 0; padding: 0; background-color: lightgray;" v-if="data && show">
			<view style="display: flex; flex-flow: column nowrap;align-items: left;">
				<view style="background-color: lightgray; display: flex;margin-top: 5px;">
					<view>
						<image style="width: 200rpx;margin-left: 5px;" :src="`https://game.gtimg.cn/images/lol/act/img/champion/${data.hero.alias}.png`" mode="widthFix"></image>
					</view>
					<view style="display: flex;flex-flow: column nowrap;justify-content: space-around;margin-left: 5px;">
						<text style="font-size: 25px;">{{data.skins[0].heroTitle}}</text>
						<text>昵称：{{data.skins[0].name}}</text>
						<text>金币：{{data.hero.goldPrice}}</text>
						<text>点券：{{data.hero.couponPrice}}</text>
					</view>
				</view>
				<!-- 背景 卡片 -->
				<view>
					<uni-card title="背景故事" mode="basic" :isFull="true" style="margin: 5px; border-radius: 0;" class="bg">
						<text>{{data.hero.shortBio}}</text>
					</uni-card>
				</view>
				<!-- 折叠 -->
				<view>
					<uni-collapse>
						<uni-collapse-item title="使用建议">
							<text v-for="(item,i) of data.hero.allytips" :key="i" style="margin-left: 5px;margin-top: 5px;">{{item}}</text>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<!-- 对战技巧 -->
				<view>
					<uni-collapse>
						<uni-collapse-item title="对战技巧">
							<text v-for="(item,i) of data.hero.enemytips" :key="i" style="margin-left: 5px;margin-top: 5px;">{{item}}</text>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<!-- 皮肤 -->
				<view>
					<uni-collapse>
						<uni-collapse-item title="皮肤" >
							<uni-grid :column="3" :showBorder="false">
								<uni-grid-item v-for="(item, index) in data.skins" :key="index">
									<view
										style="display: flex; justify-content: center; align-items: center;"
									>
										<image
											style="width: 160rpx; height:160rpx; border-radius: 4px;"
											:src="item.iconImg"
											mode=""
										></image>
									</view>
								</uni-grid-item>
							</uni-grid>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// #ifdef H5
			url:"/yx/images/lol/act/img/js/heroList/hero_list.js",
			// #endif
			
			// #ifndef H5
			url:"https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js",
			// #endif
			hero:[],
			data:null,
			windowHeight:0,
			current:0,
			show:true
		};
	},
	onReady() {
		this.getData()
		this.windowHeight = uni.getSystemInfoSync().windowHeight
	},
	methods: {
		getDetail(i){
			const heroId = this.hero[i].heroId;
			var url = `https://game.gtimg.cn/images/lol/act/img/js/hero/${heroId}.js`
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.data = res.data
					this.show = false
					this.$nextTick(()=>{
						this.show = true
					})
				},
				fail: () => {},
				complete: () => {}
			});
		},
		getData(){
			uni.request({
				url: this.url,
				method: 'GET',
				data: {v:50},
				success: res => {
					console.log(res);
					this.hero = res.data.hero
					this.getDetail(0)
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style>
	/* *{border: 1px solid red;} */
	.cur{
		color: #007AFF;
		background-color: lightgray;
	}
	.uni-list-item{
		display: block;
		padding: 0 !important;
	}
	
</style>
